import { Row, Col, Table, Space, Popconfirm, Divider, Input, Form, message } from "antd";
import { useModel, history } from "umi";
import { useReactive } from "ahooks";
import { Card as SemiCard, ButtonGroup, Button, List } from "@douyinfe/semi-ui";
import { IconRefresh, IconPlusCircle } from "@douyinfe/semi-icons";
import { useEffect } from "react";

import useWaitExamineAuthorize from "../hooks/useWaitExamineAuthorize";
import { InputNumber } from "antd";

const DashboardPage = () => {
    const { windowInnerHeight, UTCTimeToLocal } = useModel("global");
    const { setModalVisible, setModalTitle, setModalWidth, setModalComponent } = useModel("global.modal");
    const { dataLoading, loadWaitExamineApply, waitExamineApply } = useWaitExamineAuthorize();

    const loadData = async () => {
        let res = await loadWaitExamineApply();
        if (res.length === 0) history.replace("/customer_organization");
    };

    useEffect(() => {
        loadData();
    }, []);

    const renderOperate = (_, r, i) => (
        <Space split={<Divider type="vertical" style={{ margin: 0 }} />}>
            <a
                onClick={() => {
                    setModalTitle("补充授权信息");
                    setModalVisible(true);
                    setModalWidth(500);
                    setModalComponent(<AgreeAuthorize record={r} reloadData={loadData} />);
                }}
            >
                通过
            </a>
            <a
                onClick={() => {
                    setModalTitle("填写驳回原由");
                    setModalVisible(true);
                    setModalWidth(500);
                    setModalComponent(<RejectReason record={r} reloadData={loadData} />);
                }}
            >
                驳回
            </a>
        </Space>
    );

    const columns = [
        { title: "序号", width: 60, align: "center", render: (_, r, i) => i + 1 },
        { title: "服务商名称", dataIndex: "servicer", align: "left", render: (_, r, i) => _?.oiName },
        { title: "客户名称", dataIndex: "customer", align: "left", render: (_, r, i) => _?.oiName },
        { title: "申请时间", dataIndex: "oaaaTime", align: "center", width: 160, render: (_, r, i) => UTCTimeToLocal(_) },
        { title: "授权方式", dataIndex: "oaaaType", align: "center", width: 120 },
        { title: "授权的角色", dataIndex: "oaaaRole", align: "left", render: (_, r, i) => _.join(", ") },
        { title: "申请人", dataIndex: "apInfo", align: "center", width: 100, render: (_, r, i) => _.name },
        { title: "授权的月数", dataIndex: "oaaaMont", align: "center", width: 100 },
        {
            title: "开发商",
            children: [
                { title: "参考结算金额", dataIndex: "oaaaSdpr", align: "right", width: 120, render: (_, r, i) => "￥" + helper.numberFormat(_, 2) },
                { title: "实际结算金额", dataIndex: "sdRepr", align: "right", width: 120, render: (_, r, i) => "￥" + helper.numberFormat(_, 2) },
            ],
        },
        {
            title: "服务商",
            children: [
                { title: "参考结算金额", dataIndex: "oaaaSppr", align: "right", width: 120, render: (_, r, i) => "￥" + helper.numberFormat(_, 2) },
                { title: "实际结算金额", dataIndex: "spRepr", align: "right", width: 120, render: (_, r, i) => "￥" + helper.numberFormat(_, 2) },
            ],
        },
        { title: "客户结算金额", dataIndex: "oaaaEcpr", align: "right", width: 120, render: (_, r, i) => "￥" + helper.numberFormat(_, 2) },
        { title: "审核状态", dataIndex: "oaaaExst", align: "center", width: 100 },
        { title: "操作", align: "center", width: 100, render: renderOperate },
    ];

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 54;

    return (
        <SemiCard
            title={<span style={{ lineHeight: "32px", fontSize: 16 }}>待审核的授权列表</span>}
            headerExtraContent={
                <ButtonGroup>
                    <Button icon={<IconRefresh />} onClick={loadData}></Button>
                </ButtonGroup>
            }
            headerStyle={{ padding: "10px 14px" }}
            shadows="always"
            bordered={false}
            bodyStyle={{ padding: 0, height: cardBodyHeight }}
            style={{ margin: 10 }}
        >
            <Table
                loading={dataLoading}
                size="small"
                dataSource={waitExamineApply}
                columns={columns}
                rowKey="oaaaUuid"
                bordered
                pagination={false}
                scroll={{
                    y: cardBodyHeight - 78,
                }}
            />
        </SemiCard>
    );
};

const AgreeAuthorize = ({ record, reloadData }) => {
    const [form] = Form.useForm();
    const { onCloseGlobalModal } = useModel("global.modal");
    const { baseInfo } = useModel("person.info");
    const { dataLoading, agreeAuthorizeApply } = useWaitExamineAuthorize();

    useEffect(() => {
        if (record) {
            form.setFieldsValue({ sdRepr: record.oaaaSdpr, spRepr: record.oaaaSppr });
        }
    }, [record]);

    const onFinish = async (values) => {
        let exInfo = [...record.exInfo];
        exInfo.push({
            uuid: baseInfo.uuid,
            name: baseInfo.realName,
            time: new Date().getUTCTime(),
            reason: "",
            status: "通过",
        });
        let variables = {
            oaaaUuid: record.oaaaUuid,
            sdRepr: values.sdRepr,
            spRepr: values.spRepr,
            exInfo,
        };
        agreeAuthorizeApply(variables, (res) => {
            if (res) {
                message.success("提交成功");
                reloadData();
                onCloseGlobalModal();
            }
        });
    };

    return (
        <div style={{ padding: "10px 20px" }}>
            <Form form={form} onFinish={onFinish} layout="vertical" initialValues={record}>
                <Row gutter={20}>
                    <Col span={12}>
                        <Form.Item label="开发商参考结算金额" name="oaaaSdpr">
                            <InputNumber readOnly controls={false} prefix="￥" style={{ width: 200 }} />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item label="开发商实际结算金额" name="sdRepr" rules={[{ required: true }]}>
                            <InputNumber controls={false} prefix="￥" style={{ width: 200 }} />
                        </Form.Item>
                    </Col>
                </Row>

                <Row gutter={20}>
                    <Col span={12}>
                        <Form.Item label="服务商参考结算金额" name="oaaaSppr">
                            <InputNumber readOnly controls={false} prefix="￥" style={{ width: 200 }} />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item label="服务商实际结算金额" name="spRepr" rules={[{ required: true }]}>
                            <InputNumber controls={false} prefix="￥" style={{ width: 200 }} />
                        </Form.Item>
                    </Col>
                </Row>

                <Form.Item style={{ textAlign: "center" }}>
                    <Space>
                        <Button loading={dataLoading} type="primary" theme="solid" htmlType="submit">
                            提交
                        </Button>
                        <Button loading={dataLoading} htmlType="button" onClick={() => onCloseGlobalModal()}>
                            取消
                        </Button>
                    </Space>
                </Form.Item>
            </Form>
        </div>
    );
};

const RejectReason = ({ record, reloadData }) => {
    const [form] = Form.useForm();
    const { onCloseGlobalModal } = useModel("global.modal");
    const { baseInfo } = useModel("person.info");
    const { dataLoading, updateExamineRecord } = useWaitExamineAuthorize();

    const onFinish = async (values) => {
        let exInfo = [...record.exInfo];
        exInfo.push({
            uuid: baseInfo.uuid,
            name: baseInfo.realName,
            time: new Date().getUTCTime(),
            reason: values.reason,
            status: "驳回",
        });
        updateExamineRecord(record.oaaaUuid, exInfo, "已驳回", (res) => {
            if (res) {
                message.success("提交成功");
                reloadData();
                onCloseGlobalModal();
            }
        });
    };

    return (
        <div style={{ padding: "10px 20px" }}>
            <Form form={form} onFinish={onFinish} layout="vertical">
                <Form.Item label="驳回原由" name="reason" rules={[{ required: true }]}>
                    <Input.TextArea />
                </Form.Item>

                <Form.Item style={{ textAlign: "center" }}>
                    <Space>
                        <Button loading={dataLoading} type="primary" theme="solid" htmlType="submit">
                            提交
                        </Button>
                        <Button loading={dataLoading} htmlType="button" onClick={() => onCloseGlobalModal()}>
                            取消
                        </Button>
                    </Space>
                </Form.Item>
            </Form>
        </div>
    );
};

export default DashboardPage;
